<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome Home</title>
<!-- JqueryUI -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery-ui.css">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<!-- Awesome font icons -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css" media="screen">
<!-- Owlcoursel -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/owl-coursel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/owl-coursel/owl.transitions.css">
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/magnific-popup/magnific-popup.css">
<!-- Style -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css" media="screen">
<!-- Fw -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/fw.css" media="screen">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mystyle.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/css.css" />
</head>
<body class="bg-m">

 <input type="hidden" id="hidden_customer_id" value="${customer.id}" />

<div class="preloader">
	<i class="fa fa-spinner"></i>
</div>
<%-- <%@include file="/WEB-INF/view/public/header.jsp" %>  --%>
<jsp:include page="public/header.jsp"></jsp:include>
<!-- Banner -->
	<!-- 开始加载地址信息，做成类淘宝的ul -->
	<div class="Caddress">
		<div class="open_new">
			<button class="open_btn" id="use_new_address_btn">使用新地址</button>
		</div>
		
			<div class="add_mi">
				<!-- <p style="border-bottom:1px dashed #ccc;line-height:28px;">浙江杭州(爸爸收)</p>
				<p>萧山 北干 明怡花苑53幢3单元 13735683918</p> -->
				
				<!-- <select name="warehouse">
	 				<option value="天津">天津</option>
	 				<option value="上海">上海</option>
	 				<option value="香港">香港</option>
	 			</select> -->

				<select id="sel">
				<!-- 	<c:forEach items="${receiverInfoVOs}" var="receiverInfoVO">
						<option id=${receiverInfoVO.key} >${receiverInfoVO.value} </option>
					</c:forEach> -->
					
				</select>
			</div>
		
	</div>

	<div class="shopping_content">
		<div class="shopping_table">
			<table border="1" bordercolor="#cccccc" cellspacing="0" cellpadding="0" style="width: 100%; text-align: center;">
				商品列表抬头
				<tr>
					<th align="center">序号</th>
					<th align="center">商品图片</th>
					<th align="center">商品名称</th>
					<th align="center">商品价格</th>
					<th align="center">商品数量</th>
					<th align="center">商品操作</th>
				</tr>
				
				<!-- 代码后面是需要优化的 -->
				<!-- 循环输出商品内容 -->
				<c:forEach items="${orderItems}" var="orderItemVO" varStatus="status" >
					<tr>
						<td align="center">
							${status.index+1 }
						</td>
						<td align="center">
							<a><img width="120" height="100" src="${orderItemVO.value.img }" /></a>
						</td>
						<td id="aaaa">
						<!-- 商品名称 -->
							<input type="hidden" id=${orderItemVO.key} value=${orderItemVO.key}>
							<span id="{orderItemVO.key}">${orderItemVO.value.name }</span>
						</td>
						<td>
							<span class="span_momey">${orderItemVO.value.price }</span>
						</td>
						<td>
							<button class="btn_reduce" id="minus_foods_in_orderInfo">-</button>
							<input class="momey_input" type="" name="" id="food_total_in_order" value="${orderItemVO.value.total }" disabled="disabled" />
							<button class="btn_add" id="plus_foods_in_orderInfo">+</button>
						</td>
						<td>
							<button class="btn_r" name="remove_food_in_orderInfo">删除</button>
						</td>
					</tr>
				</c:forEach>
				<!-- 循环输出商品内容 结束 -->
			</table>
			<div class="" style="width: 100%; text-align: right; margin-top: 10px;">
				<div class="div_outMumey" style="float: left; background-color: red">
					总价： <span class="out_momey">${totalMoney}</span>
				</div>
				<button id="pay_from_orderInfo" class="btn_closing">结算</button>
			</div>
		</div>
	</div>

		<!--
        	作者：z@163.com
        	时间：2016-03-01
        	描述：shade 遮罩层
        -->
		<div class="shade">
		</div>
		
		<!-- 新增收货地址：可以由 jquery -->

		<div class="shade_content">
			<div class="col-xs-12 shade_colse">
				<button id="button_to_close_address_info">x</button>
			</div>
			<div class="nav shade_content_div">
				<div class="col-xs-12 shade_title">
					新增收货地址
				</div>
				<div class="col-xs-12 shade_from">
					
						<!-- <div class="col-xs-12">
							<span class="span_style" id="">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</span>
							<input class="input_style" type="" name="" id="region" value="" placeholder="&nbsp;&nbsp;请输入您的所在地区" />
						</div> -->
						<div class="col-xs-12">
							<span class="span_style" id="">收货地址</span>
							<input class="input_style" type="text" name="" id="address" value="" placeholder="&nbsp;&nbsp;请输入您的收货地址" />
						</div>
						
						<div class="col-xs-12">
							<span class="span_style" class="span_sty" id="">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
							<input class="input_style" type="text" name="" id="name_" value="" placeholder="&nbsp;&nbsp;请输入您的姓名" />
						</div>
						<div class="col-xs-12">
							<span class="span_style" id="">手机号码</span>
							<input class="input_style" type="text" name="" id="phone" value="" placeholder="&nbsp;&nbsp;请输入您的手机号码" />
						</div>
						<div class="col-xs-12">
							<input class="btn_remove" type="button" id="" value="取消" />
							<input type="button" class="sub_set" id="sub_setID" value="提交" />
						</div>
					
				</div>
			</div>
		</div>

<!-- jQuery -->
<script src="${pageContext.request.contextPath}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="${pageContext.request.contextPath}/js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="${pageContext.request.contextPath}/js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${pageContext.request.contextPath}/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${pageContext.request.contextPath}/js/script.js"></script>
<script src="${pageContext.request.contextPath}/js/orderInfo.js"></script>
<!-- <script type="text/javascript">

					function Address(){
						var id;
						var address;
						var phone;
						var name;
					}
					
					function AjaxManager(){
						var obj = {};
						
						obj.addAddress = function(json,onSuccess){
							$.ajax({
									type:"POST",
									url:"receiverInfo",
									data:json,
									contentType:"application/json",
									dataType: "json"
								
							}).done(function(msg){
								onSuccess(msg);
								if(msg != null){
									alert("添加成功。");
								}
							});
						};
						
						return obj;
					}
					
					function Renderer(){
						var obj = {};
						obj.renderSelect = function(data){
							var select = $("#sel");
							select.empty();
							$.each(data, function(index, addressVO){
								var html = "<option>" + addressVO.name + '    ' + addressVO.phone + '   ' + addressVO.address +"</option>";
								select.append($.parseHTML(html));
							});
						};
						
						return obj;
					}
	
					$("#sub_setID").on("click",function(){
						 var add = new Address();
						 var ajaxManager = new AjaxManager();
						 var renderer = new Renderer();
						add.address =  $("#address").val();
						add.phone = $("#phone").val();
						add.name = $("#name_").val();
						ajaxManager.addAddress(JSON.stringify(add),renderer.renderSelect);
						
						$(".shade_content").hide();
						$(".shade").hide();
					});
					
					$(".btn_remove").on("click", function(){
						$(".shade_content").hide();
						$(".shade").hide();
					})
	
</script> -->
</body>
</html>